layui.define(['jquery'], function(exports) {
    "use strict";

    var MOD_NAME = 'array',
        $ = layui.jquery;

    var ArrayItem = function(opt) {
        this.options = $.extend({}, {
            elem : null,
            type : 'array',// 类型：array keyvalue
            value : '',
            change:null
        }, opt);

        if (!this.options.elem && $(this.options.elem).length) {
            throw new  Error('elem参数错误');
        }
        if (this.options.value && typeof (this.options.value) == 'string') {
            this.options.value = JSON.parse(this.options.value);
        }
        this.elem = $(this.options.elem);
        this.container = $('<div class="array-item"></div>');
        this.list = $('<div class="array-item-list"></div>');
        this.init();
    }

    ArrayItem.prototype.init = function() {
        this.container.append(this.list).append('<div class="array-item-action"><a class="layui-btn layui-btn-sm layui-btn-normal array-item-add">新增</a><a class="layui-btn layui-btn-sm  layui-btn-danger array-item-clear">清空</a></div>')
        this.elem.append(this.container);
        this.addEventListener();
        if (this.options.value) {
            for (var i in this.options.value) {
                this.addRow(this.options.value[i], i);
            }
        }
    }

    ArrayItem.prototype.addEventListener = function() {
        var _this = this;
        this.elem
            .on('click', '.array-item-add', function () {
                _this.addRow();
            })
            .on('click', '.array-item-clear', function () {
                _this.clearRow();
            })
            .on('click', '.array-item-delete', function () {
                _this.removeRow(this);
            }).on('change', '.array-item-array-value,.array-item-kv-key,.array-item-kv-value', function () {
                _this.triggerChange();
            })

        if (window.Sortable) {
            new Sortable(this.list[0], {
                animation: 150,
                ghostClass: 'blue-background-class',
                handle : ".array-item-sort",
                onEnd : function () {
                    _this.triggerChange();
                }
            });
        }
    }
    ArrayItem.prototype.addRow = function(value, key) {
        value = value !== undefined ?  value : '';
        key = key !== undefined ?  key : '';
        var row = $('<div class="array-item-row"></div>');
        var input = '';
        if (this.options.type == 'array') {
            input = '<input type="text" value=\''+value+'\' class="layui-input array-item-array-value"/>';
        } else {
            input = '<input type="text" value="'+key+'" class="layui-input array-item-kv-key"/><span class="array-item-delimiter">:</span><input type="text"value=\''+value+'\'  class="layui-input array-item-kv-value"/>';
        }
        row.append(input).append('<a class="array-item-delete"><i class="layui-icon layui-icon-close-fill"></i></a><a class="array-item-sort"><i class="layui-icon layui-icon-triangle-d up"></i><i class="layui-icon layui-icon-triangle-d down"></i></a>');
        this.list.append(row);
        this.triggerChange();
    }
    ArrayItem.prototype.removeRow = function(obj) {
        $(obj).closest('.array-item-row').remove();
        this.triggerChange();
    }
    ArrayItem.prototype.clearRow = function() {
        this.list.empty();
        this.triggerChange();
    }
    ArrayItem.prototype.triggerChange = function() {
        var _this = this;
        var values = this.options.type == 'array' ? [] : {};
        this.list.find('.array-item-row').each(function () {
            if (_this.options.type == 'array') {
                values.push($(this).find('.array-item-array-value').val());
            } else {
                values[$(this).find('.array-item-kv-key').val()] = $(this).find('.array-item-kv-value').val();
            }
        });
        if (this.options.change) {
            this.options.change.call(this, values);
        }
    }

    exports(MOD_NAME, {
        render: function (opt) {
            new ArrayItem(opt)
        }
    });
});
